<template>
	<sl-pageComplete :pageObject="goods" :isLoading="isLoading" :isDisplay="false" :openStatusbar="true">
		<view class="detail">
			<!-- 轮播 -->
			<uni-swiper-dot :info="swiperList" :current="current" field="tenantName" :dotsStyles="dotsStyles" :mode="mode">
				<swiper class="detail-swiper" @change="change" style="height: 680rpx">
					<swiper-item v-for="(item ,index) in swiperList" :key="index">
						<view class="swiper-item">
							<sl-image :value="item.content"></sl-image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- 商品主体 -->
			<view class="detail-body">
				<view class="margin-box">
					<view class="detail-body-content">
						<view class="flex flex-x-between">
							<Money :priceValue="goods.price" :activeClass="['money-price-lg']"></Money>
							<view class="flex flex-y-center">
								<text class="detail-body-content-sales">月销 {{countSales || initData.salesVolume}}</text>
							</view>
						</view>
						<view class="detail-body-content-name">
							<Tag :tagName="tags"></Tag>
							{{ goods.name }}
						</view>
					</view>
					<view class="detail-body-brief">{{ goods.brief }}</view>
				</view>
				<view class="margin-box">
					<Coupon @coupon="onCouponChange"></Coupon>
					<view class="detail-body-transportation">
						<view class="-label">运费</view>
						<view class="-value">待下单时确认</view>
					</view>
					<Service></Service>
				</view>

				<view class="margin-box">
					<TenantHead v-if="isShowTenant" :tenant="tenant"></TenantHead>
				</view>
				<view class="margin-title" v-if="goods.introduction">商品详情</view>
				<view class="detail-body-content-brief" v-if="goods.introduction">
					<rich-text :nodes="getIntroduction(goods.introduction)" class="ql-editor"></rich-text>
				</view>
				<view class="margin-title">购物须知</view>
				<Instructions></Instructions>
				<view class="py-1"></view>
			</view>
		</view>
		<!-- 购买 -->
		<view class="goods-action">
			<view class="goods-action__inner">
				<view class="-action -index" @click="onTargetTenant">
					<image class="custom-icon iconfont-size-big" src="@/static/svg/icon-index.svg" />
					<view>店铺</view>
				</view>
				<view class="-action -share">
					<image class="custom-icon iconfont-size-big" src="@/static/svg/icon-share.svg" />
					<view>分享</view>
				</view>
				<view class="-action -star" @click="attention">
					<image class="custom-icon iconfont-size-big" src="@/static/svg/icon-star1.svg" v-if="!isStar" />
					<image class="custom-icon iconfont-size-big" src="@/static/svg/icon-star2.svg" v-else />
					<view>收藏</view>
				</view>
				<view class="-action -buy flex-middle-center" @click="buttonClick">立即购买</view>
			</view>
		</view>
		<!-- sku -->
		<SkuPopup v-if="!isLoading" :showSkuPopup.sync="isShowSkuPopup" :localData="goodsInfo" :mode="skuMode"
			:maskCloseAble="true" @buy-now="buyNow" />
	</sl-pageComplete>
</template>

<script>
	import ShopOrderApi from '@/api/order/shopOrder.js';
	import GoodsApi from '@/api/goods/goods.js';
	import TenantApi from '@/api/tenant/tenant.js';
	import Constants from '@/constants';
	import Instructions from '@/pages/components/goods/instructions/instructions.vue';
	import Service from '@/pages/components/goods/service/service.vue';
	import Coupon from '@/pages/components/goods/coupon/coupon.vue';
	import SkuPopup from '@/pages/components/goods/skuPopup/skuPopup.vue';
	import TenantHead from '@/pages/components/head/tenantHead.vue';
	import Sales from '@/pages/components/count/sales.vue';
	import Money from '@/pages/components/money/money.vue';
	import Tag from '@/pages/components/tag/tag.vue';

	//
	export default {
		//
		name: 'goodsDetail',
		//
		mixins: [Constants],
		//
		components: {
			Instructions,
			Service,
			TenantHead,
			SkuPopup,
			Sales,
			Money,
			Tag,
			Coupon
		},
		//
		data() {
			return {
				//页面参数
				options: {},
				//加载
				isLoading: true,
				//等待加载了商品信息再显示
				isShowTenant: false,
				//商品Id
				goodsId: '',
				//商品标签
				tags: '',
				//商品详情Id
				sourceId: '',
				//商品销量
				countSales: '',
				//商品详情
				goods: {},
				//组装sku后的商品详情
				goodsInfo: {},
				//店铺Id
				tenantId: '',
				//店铺
				tenant: {},
				//模式
				skuMode: 1,
				//是否显示sku弹窗
				isShowSkuPopup: false,
				//是否收藏
				isStar: false,
				//轮播
				swiperList: [],
				current: 0,
				mode: 'round',
				//商品导航
				buttonOptions: [{
					icon: 'shop',
					text: '店铺'
				}, {
					icon: 'star',
					text: '收藏',
				}],
				customButtonGroup: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(118.17deg, #FEA370, #FE2406)',
					color: '#fff'
				}],
				isShowFlooter: true,
				dotsStyles: {
					bottom: '20',
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(255, 255, 255, 0.3) solid',
					selectedBackgroundColor: 'rgb(53 52 52 / 90%)',
					selectedBorder: '1px rgba(255, 255, 255, 0.9) solid'
				},
			};
		},
		//
		computed: {
			//
			collectIcon() {
				return this.isStar ? 'icon-shoucangxuanzhong' : 'icon-shoucangweixuanzhong';
			},
			//
			collectName() {
				return this.isStar ? '已收藏' : '收藏';
			}
		},
		//
		onLoad(options) {
			this.options = options;
			//初始化参数
			this.initPara();
			//加载页面数据
			this.onRefreshPage();
		},
		//
		methods: {
			//
			initPara() {
				this.goodsId = this.options.goodsId ? this.options.goodsId : '';
				this.tags = this.options.tags ? this.options.tags : '新品';
			},
			//页面数据
			onRefreshPage: async function() {
				const app = this;
				app.isLoading = true;
				await app.getGoods();
				this.isLogin = !!this.$store.getters.token;
				//获取页面数据
				if (this.isLogin) {
					await app.isAttention();
				}
				//商品细节，店铺和我的关注
				Promise.all([app.getGoodsDetail(), app.getTenant()])
					.then(result => {
						app.initSku();
					})
					.catch(err => console.error('catch', err))
					.finally(() => (app.isLoading = false));
			},
			getIntroduction(text) {
				return text && text.replace(/<img/g, '<img style="width:99%"') || ""
			},
			//得到商品
			getGoods: async function() {
				const app = this;
				let res = await GoodsApi.get(app.goodsId);
				app.sourceId = res.obj.id;
				app.tenantId = res.obj.tenantId;
				app.countSales = res.obj.sales;
			},
			//得到商品明细
			getGoodsDetail: async function() {
				const app = this;
				let res = await GoodsApi.get_details(app.sourceId);
				app.goods = res.obj.goods;
				//轮播
				if (res.obj.images) {
					this.swiperList = res.obj.images;
				}
				//sku
				app.goods.skuList = res.obj.products;
				//spec
				app.goods.specList = res.obj.specs;
			},
			//得到店铺
			getTenant: async function() {
				console.log('getTenant')
				let res = await TenantApi.get(this.tenantId);
				this.isShowTenant = true
				this.tenant = res.obj;
			},
			//是否收藏
			isAttention: async function() {
				let attention = {
					productId: this.goodsId
				};
				let res = await GoodsApi.is_attention(attention);
				this.isStar = !!res.obj;
				console.log('商品收藏：', this.isStar)
				this.buttonOptions[1].text = this.isStar ? '已收藏' : '收藏';
				this.buttonOptions[1].icon = this.isStar ? 'star-filled' : 'star';
			},
			//收藏
			attention() {
				let attention = {
					productId: this.goodsId,
					productName: this.goods.name,
					productImage: this.goods.image
				};
				GoodsApi.attention_product(attention).then(result => {
					if (result.success) {
						this.isStar = !this.isStar;
						this.buttonOptions[1].text = this.isStar ? '已收藏' : '收藏';
						this.buttonOptions[1].icon = this.isStar ? 'star-filled' : 'star';
						this.$app.toast(this.isStar ? '成功收藏' : '取消收藏');
					}
				});
			},
			//组装goodsInfo
			initSku() {
				const app = this;
				app.goodsInfo = {
					_id: app.goods.id,
					name: app.goods.name,
					goods_thumb: app.$options.filters['ImageSrc'](app.goods.image),
					sku_list: app.getSkuList(),
					spec_list: app.getSpecList()
				};
			},
			//整理商品sku
			getSkuList() {
				const app = this;
				const {
					goods: {
						skuList
					}
				} = app;
				const defaultData = ['默认'];
				const skuData = [];
				skuList.forEach(item => {
					skuData.push({
						_id: item.id,
						goods_sku_id: item.id,
						goods_id: item.goodsId,
						goods_name: item.name,
						image: app.$options.filters['ImageSrc'](item.image),
						price: item.price,
						stock: item.store,
						freezeStock: item.freezeStore,
						spec_value_ids: item.specIds,
						sku_name_arr: item.specNames ? item.specNames.split(',') : defaultData
					});
				});
				return skuData;
			},
			//整理商品spec
			getSpecList() {
				const app = this;
				const {
					goods: {
						specList
					}
				} = app;
				const defaultData = [{
					name: '默认',
					list: [{
						name: '默认'
					}]
				}];
				const specData = [];
				specList.forEach(group => {
					const children = [];
					group.opts.forEach(specValue => {
						children.push({
							name: specValue.specOptName
						});
					});
					specData.push({
						name: group.specName,
						list: children
					});
				});
				return specData.length ? specData : defaultData;
			},
			onTargetTenant() {
				this.toTargetTenant(this.tenantId);
			},
			//跳转到店铺
			toTargetTenant(id) {
				this.$app.navTo(this.pages.goodsTenantPage, {
					tenantId: id
				});
			},
			//右侧按钮点击
			buttonClick(e) {
				this.skuMode = 3;
				this.isShowSkuPopup = true;
			},
			//购买
			buyNow(selectShop) {
				ShopOrderApi.buy({
					productId: selectShop.goods_sku_id,
					quantity: selectShop.buy_num
				}).then(res => {
					this.$app.navTo(this.pages.checkoutIndexPage);
				});
				this.showGoodsSkuPopup = false;
			},
			//swipe滑动
			change(e) {
				this.current = e.detail.current;
			},
			//左侧图标点击
			optionsClick(e) {
				if (e.content.text === '店铺') {
					this.toTargetTenant(this.tenantId);
				} else if (e.content.text === '收藏' || e.content.text === '已收藏') {
					this.attention();
				}
			},
			// 定位到店铺首页
			onCouponChange(flag) {
				this.isShowFlooter = !flag;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		margin-bottom: 68rpx;

		.margin-box {
			margin: 15rpx 0rpx;
		}

		.margin-title {
			text-align: center;
			color: #999999;
			margin: 10rpx;
		}

		.detail-swiper {
			height: 716rpx;
		}

		.detail-body {
			padding: 16rpx;

			.detail-body-content {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				padding: $xj-standard-padding;

				.detail-body-content-sales {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-secondary;
				}

				.detail-body-content-name {
					display: flex;
					align-items: center;
					font-size: $uni-font-size-lg;
					color: $uni-text-color-primary;
					padding: 16rpx 0rpx;
				}
			}

			.detail-body-brief {
				background: $uni-bg-color;
				padding: 20rpx;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
			}


			.detail-body-transportation {
				display: flex;
				background: $uni-bg-color;
				padding: $xj-standard-padding;
				position: relative;

				.-label {
					color: #999;
					margin-right: 10rpx;
				}

				.-value {}

				&::after {
					height: 1px;
					border-bottom: 1px solid #F1F1F1;
					background-color: #fff;
					content: " ";
					display: block;
					position: absolute;
					left: 20rpx;
					right: 20rpx;
					bottom: 0px;
				}
			}

			.detail-body-content-brief {
				/deep/ img {
					display: block;
					width: 100%;
				}

				border-radius: 20rpx;
			}
		}
	}

	#goodsDetailSlogan {
		margin-left: 14rpx;
	}

	.goods-action {
		background: #fff;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		position: fixed;
		padding-bottom: 0 !important;
		padding-bottom: constant(safe-area-inset-bottom) !important;
		padding-bottom: env(safe-area-inset-bottom) !important;
		box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.03);

		.-index {}

		.-share {
			display: none;
		}

		.-star {}

		.-buy {
			flex: 1;
			border-radius: 38rpx;
			background: linear-gradient(118deg, #FEA370 0%, #FE2406 95.01%);
			color: #FFF;
			font-size: 26rpx;
			margin-right: 0 !important;
		}

		.-action {
			margin-right: 60rpx;
			text-align: center;
		}

		.goods-action__inner {
			display: flex;
			padding: 10rpx 8rpx;
			padding-left: 40rpx;
			font-size: 20rpx;
		}
	}
</style>